<template>
  <div class="y-ui-main">
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo left-menu"
      @open="handleOpen"
      @close="handleClose"
    >
      <el-sub-menu index="1">
        <template #title>
          <el-icon><location /></el-icon>
          <span>基础组件</span>
        </template>
        <el-menu-item index="1-1">地区选择器</el-menu-item>
        <el-menu-item index="1-2">定位器</el-menu-item>
      </el-sub-menu>
      <el-menu-item index="2">
        <el-icon><icon-menu /></el-icon>
        <span>Navigator Two</span>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <el-icon><document /></el-icon>
        <span>Navigator Three</span>
      </el-menu-item>
      <el-menu-item index="4">
        <el-icon><setting /></el-icon>
        <span>Navigator Four</span>
      </el-menu-item>
    </el-menu>
    <div class="y-ui-content">
      <y-area :addressInfo="addressInfo" />
    </div>
  </div>
</template>
<script setup lang="ts">
import type { AddressInfo } from './components/y-area/area.type';

const addressInfo = reactive<AddressInfo>({
  province: null,
  city: null,
  area: null,
  detailAddress: ''
})
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
</script>
<style lang="scss">
.y-ui-main {
  display: flex;
  width: 100%;
  height: 100%;
  .left-menu {
    width: 300px;
    height: 100%;
  }
  .y-ui-content {
    width: calc(100% - 300px);
    height: 100%;
  }
}

</style>
